@extends('shop::layouts.master')
@section('title')
    {{$title}}
@endsection
<style>
    .layui-form-item .layui-form-label {width: 120px}
    .layui-laydate-list.laydate-time-list > li{width:50% !important;}
    .layui-laydate-list.laydate-time-list > li:last-child{display:none !important;}
</style>
@section('tab')
    <div class="layui-fluid">
        <div class="layui-row">
            <form class="layui-form">
                <input type="hidden" id="day_min" value="{{date("Y-m-d")}}">
                <input type="hidden" id="day_max" value="{{$max}}">

                <input type="hidden" name="dayed" id="dates" value="{{$days}}">
                <div class="layui-form">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">上午时间段</label>
                            <div class="layui-input-inline">
                                <input type="text" name="am_time" lay-verify="required" class="layui-input" id="am_time" readonly autocomplete="off">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">上午可检测数量</label>
                            <div class="layui-input-inline">
                                <input type="text" name="am_num" lay-verify="required|number" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-form">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">下午时间段</label>
                            <div class="layui-input-inline">
                                <input type="text" name="pm_time" lay-verify="required" class="layui-input" id="pm_time" readonly autocomplete="off">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">下午可检测数量</label>
                            <div class="layui-input-inline">
                                <input type="text" name="pm_num" lay-verify="required|number" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-form">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">范围选择</label>
                            <div class="layui-input-inline">
                                <input type="radio" name="type" value="1" lay-filter="timeCate" title="日期" checked="">
                                <input type="radio" name="type" value="2" lay-filter="timeCate" title="年月">
                            </div>
                        </div>
                        <div class="layui-inline" id="day_type">
                            <label class="layui-form-label">日期范围</label>
                            <div class="layui-input-inline">
                                <input type="text" name="day" class="layui-input" id="day_part" readonly autocomplete="off" placeholder=" ~ ">
                            </div>
                        </div>
                        <div class="layui-inline" id="month_type" style="display: none">
                            <label class="layui-form-label">年月范围</label>
                            <div class="layui-input-inline">
                                <input type="text"  name="month" class="layui-input" id="month_part" readonly autocomplete="off" placeholder=" ~ ">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-form">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">是否包含周末</label>
                            <div class="layui-input-inline">
                                <input type="radio" name="work" value="1" title="否" checked="">
                                <input type="radio" name="work" value="2" title="是">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label for="L_repass" class="layui-form-label"></label>
                    <button class="layui-btn" lay-filter="add" lay-submit="" style="margin-left: 30%;">添加</button>
                </div>

            </form>
        </div>
    </div>

@endsection

@section('tab_js')
    @include('shop::checkpoint.calendar_js')
    <script>
        layui.use(['form', 'layer', 'jquery','laydate'], function () {
            $ = layui.jquery;
            var form = layui.form,
                layer = layui.layer,
                laydate = layui.laydate;
            var min_day = $('#day_min').val();
            var max_day = $('#day_max').val();

            laydate.render({
                elem: '#am_time'
                , type: 'time'
                , format: 'HH:mm'
                , range: true
                , done: function (value) {
                    var hours = value.split(' - ');console.log(hours);
                    if(hours[0] > '12:00' || hours[1] > '12:00'){
                        layer.msg('请选择12:00之前的时间段', {time: 2000, icon: 5}, function () {
                            $('#am_time').val('');
                            return false;
                        });
                    }
                    if(hours[0] >= hours[1]){
                        layer.msg('开始时间必须小于结束时间', {time: 2000, icon: 5}, function () {
                            $('#am_time').val('');
                            return false;
                        });
                    }
                }
            });
            laydate.render({
                elem: '#pm_time'
                , type: 'time'
                , format: 'HH:mm'
                , range: true
                , done: function (value) {
                    var hours = value.split(' - ');
                    if(hours[0] < '12:00' || hours[1] < '12:00'){
                        layer.msg('请选择12:00之后的时间段', {time: 2000, icon: 5}, function () {
                            $('#pm_time').val('');
                            return false;
                        });
                    }
                    if(hours[0] >= hours[1]){
                        layer.msg('开始时间必须小于结束时间', {time: 2000, icon: 5}, function () {
                            $('#pm_time').val('');
                            return false;
                        });
                    }
                }
            });

            //日期范围
            laydate.render({
                elem: '#day_part'
                ,range: '~'
                ,min: min_day
                ,max: max_day
            });

            //年月范围
            laydate.render({
                elem: '#month_part'
                ,type: 'month'
                ,range: '~'
                ,min: min_day
                ,max: max_day
            });

            form.on('radio(timeCate)', function(data){
                console.log(data.value);
                if(data.value == 1){
                    $('#month_part').val('');
                    $('#month_type').hide();
                    $('#day_type').show();
                }else{
                    $('#day_part').val('');
                    $('#day_type').hide();
                    $('#month_type').show();
                }
            });

            form.render('radio');
            //监听提交
            form.on('submit(add)', function (data) {
                $.ajax({
                    url: js_url('shop-checkpoint-store'),
                    type: 'post',
                    data: data.field,
                    dataType: "json",
                    success: function (result) {
                        if (result.state === 0) {
                            layer.msg(result.msg, {time: 600, icon: 6}, function () {
                                //关闭当前frame
                                xadmin.close();
                                // 可以对父窗口进行刷新
                                xadmin.father_reload();
                            });
                        } else {
                            layer.msg(result.msg, {time: 1000, icon: 5});
                        }
                    }
                });
                return false;

            });

        });
    </script>
@endsection




